<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3D立体星星动画效果</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      camera.position.z = 5;

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      var geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2); // 星星的大小
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 星星的颜色
      var star = new THREE.Mesh(geometry, material); // 创建星星
      scene.add(star); // 将星星添加到场景中

      function animate() {
        requestAnimationFrame(animate); // 使动画循环播放
        star.rotation.x += 0.01; // 星星在x轴上的旋转速度
        star.rotation.y += 0.02; // 星星在y轴上的旋转速度
        renderer.render(scene, camera); // 渲染场景和相机
      }
      animate(); // 开始播放动画
    </script>
  </body>
</html>
